<!--
 * @Author: xuna
 * @Descripttion: 查看授信记录
-->
<template>
  <div class="paycollect-container">
    <el-form
      ref="formInline"
      :inline="true"
      :model="paycollectInfo"
      :label-position="labelPosition"
    >
      <el-row type="flex" justify="space-between" style="margin-bottom: 14px;">
        <el-col class="share-input" :span="7">
          <el-form-item label="订单类型:" prop="type">
            <el-select v-model="paycollectInfo.type" placeholder="请选择" class="normal-input">
              <el-option
                v-for="item in creditTypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="display:flex;justify-content: center;">
          <el-form-item label="日期:" prop="startTime">
            <el-date-picker
              v-model="paycollectInfo.startTime"
              type="date"
              placeholder="开始日期"
              class="sign-time"
              :picker-options="statrPickOption"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            ~
            <el-date-picker
              v-model="paycollectInfo.endTime"
              type="date"
              class="sign-time"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="endPickOption"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="setting-btn" :span="5">
          <el-form-item>
            <el-button class="settbtn" type="primary" @click="exportList">
              导出
            </el-button>
            <el-button class="settbtn" type="primary" @click="getTableList">
              查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <div class="page-table-container">
      <wf-el-table
        :list="tableData"
        :total="total"
        :current="current"
        :loading="loading"
        @selection-change="onSelectionChange"
        @on-page-change="onPageChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="totalAmount" label="额度（元）"></el-table-column>
        <el-table-column prop="updateTime" label="时间"></el-table-column>
      </wf-el-table>
    </div>
  </div>
</template>

<script>
  import WfElTable from '@/components/Table/index';
  import { downloadBlob } from '@/utils/download';
  import { queryAdvanceChangeRecord, exportAdvanceChangeRecord } from '@/api/careCard';
  export default {
    components: { WfElTable },
    data() {
      return {
        current: 1,
        total: 0,
        openCheck: false,
        loading: false,
        paycolletRow: {},
        tableData: [],
        paycollectInfo: {
          startTime: null,
          endTime: null,
          type: null,
        },
        creditTypelist: [
          {
            label: '全部',
            value: null,
          },
          {
            label: '增额',
            value: 0,
          },
          {
            label: '减额',
            value: 1,
          },
          {
            label: '分配',
            value: 2,
          },
          {
            label: '回收',
            value: 3,
          },
        ],
        labelPosition: 'right',
        statrPickOption: {
          disabledDate: time => {
            if (this.paycollectInfo.endTime != null) {
              return (
                time.getTime() > new Date(this.paycollectInfo.endTime).getTime() - 8.64e6 ||
                time.getTime() < 1577808000000 ||
                time.getTime() > 1609344000000
              );
            } else {
              return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
            }
          },
        },
        endPickOption: {
          disabledDate: time => {
            if (this.paycollectInfo.startTime != null) {
              return (
                time.getTime() < new Date(this.paycollectInfo.startTime).getTime() - 8.64e7 ||
                time.getTime() < 1577808000000 ||
                time.getTime() > 1609344000000
              );
            } else {
              return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
            }
          },
        },
        selectIds: [],
      };
    },
    activated() {
      this.getTableList();
    },
    methods: {
      initList(current, info) {
        this.loading = true;
        let objData = {
          current,
          size: 10,
          type: info.type,
          startTime: info.startTime ? `${info.startTime} 00:00:00` : info.startTime,
          endTime: info.endTime ? `${info.endTime} 23:59:59` : info.endTime,
        };
        try {
          queryAdvanceChangeRecord(objData).then(res => {
            console.log(res);
            this.loading = false;
            if (res.status == 200) {
              this.tableData = res.data.records;
              let tableData = JSON.parse(JSON.stringify(res.data.records));
              this.tableData = tableData.map(val => {
                val.totalAmount =
                  val.type == 1 || val.type == 2
                    ? `-${val.totalAmount}`
                    : val.type == 0 || val.type == 3
                    ? `+${val.totalAmount}`
                    : val.totalAmount;
                val.type =
                  val.type == 0
                    ? '增额'
                    : val.type == 1
                    ? '减额'
                    : val.type == 2
                    ? '分配'
                    : val.type == 3
                    ? '回收'
                    : '';

                return val;
              });
              this.total = res.data.total;
            }
          });
        } catch (error) {
          this.loading = false;
        }
      },
      onSelectionChange(data) {
        this.selectIds = data.map(item => item.id);
        console.log(this.selectIds);
      },
      getTableList() {
        this.initList(1, this.paycollectInfo);
      },
      async exportList() {
        // 导出
        let params = {
          current: this.current,
          size: 10,
          ids: this.selectIds,
          type: this.paycollectInfo.type,
          startTime: this.paycollectInfo.startTime
            ? `${this.paycollectInfo.startTime} 00:00:00`
            : this.paycollectInfo.startTime,
          endTime: this.paycollectInfo.endTime
            ? `${this.paycollectInfo.endTime} 23:59:59`
            : this.paycollectInfo.endTime,
        };
        const res = await exportAdvanceChangeRecord(params);
        res && downloadBlob(res.data, res.filename || '授信记录.xls');
        this.$message.success('导出成功！');
      },
      onPageChange(data) {
        this.current = data.current;
        this.initList(this.current, this.paycollectInfo);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .page-table-container {
    height: calc(100% - 88px);
  }
  .wf-table-wrapper {
    height: 100% !important;
  }
  .paycollect-container {
    background-color: #efeef1;
    @include wh(100%, 100%);
    overflow: hidden;
    padding-top: 0 !important;
    /deep/.el-form--inline {
      background-color: #fff;
      border-radius: 7px;
      padding: 14px 17px 0 30px;
      box-sizing: border-box;
    }
    /deep/.el-form-item__label {
      @include font(14px, #7f848b, 400);
    }
    /deep/.el-input {
      background: rgba(255, 255, 255, 1);
      border-radius: 7px;
      border: 1px solid rgba(244, 240, 243, 1);
    }
    /deep/.el-table {
      border-radius: 7px;
    }
    .setting-btn {
      display: flex;
      justify-content: flex-end;

      .settbtn {
        @include wh(94px, 36px);
        border-radius: 7px;
        background-color: #3771e9;
      }
    }

    .handle-icon {
      @include font(14px, #353739, 400);
      margin-right: 15px;
      img {
        @include wh(23px, 23px);
        vertical-align: middle;
      }
    }
  }
  .sign-time {
    width: 180px;
    position: relative;
    margin: 0 4px;
  }
</style>
